<template>
  <div class="page-cont">
    <van-nav-bar
      title="当前位置"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <scroll-list
      v-model="lineMap"
      @onLoad="onLoad"
    >
      <track-item
        v-for="(item, i) in lineMap"
        :key="i"
        :data="item"
      />
    </scroll-list>
  </div>
</template>

<script>
import ScrollList from '@/components/ScrollList/index.vue'
import TrackItem from './components/TrackItem.vue'

export default {
  name: "CarTrackPage",
  components: {
    TrackItem,
    ScrollList
  },
  data() {
    return {
      carList: [],
      lineMap: [],
    };
  },
  created() {
  },
  methods: {
    async getCarList() {
      let data = await this.api.GET_CAR_LIST({pageNo: 1, pageSize: 100000});
      this.carList.push(...data.list)

      let line = this.preData.line.map(item => {
        return {
          line: {...item},
          cars: data.list.filter(car => car.beltlineName === item.lineName)
        }
      })
      this.lineMap = line
      this.loading = false

    },
    async onLoad(page, done) {
      await this.getCarList()
      let res = await this.api.GET_CAR_POSITION_LIST({pageNo: page, pageSize: 100000})
      this.lineMap = this.lineMap.map(item => {
        item.cars = item.cars.map(car => {
          let position = res.list.find(pos => pos.pedestalnum === car.pedestalNum)
          if (position) {
            car.position = position.procedurename
          } else {
            car.position = ''
          }
          return car;
        })
        return item;
      })
      console.log(this.lineMap)
      this.$forceUpdate()
      done(true)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
